import {CnMediumP, CnNormalSpan} from '@/components/text'
import {computed, defineComponent, PropType} from 'vue'

const PhoneDimenBlock = defineComponent({
  props: {
    dimen: {
      type: Object as PropType<MyPm.TableData[]>,
      required: true
    }
  },
  setup(props, {slots}) {
    let dimenName = computed(
      () => Array.from(new Set(props.dimen.map(item => item.pmDimensionName)))[0] || ''
    )

    let dimenId = computed(
      () => Array.from(new Set(props.dimen.map(item => item.pmDimensionId)))[0]
    )

    let targetListLen = computed(() => props.dimen.length)

    let targetWeightCount = computed(
      () => eval(props.dimen.map(target => target.pmTargetWeight).join('+')) as number
    )

    return () => (
      <div class='w-full'>
        <div class='h-35 leading-35 text-center bg-primary shadow-md'>
          <CnNormalSpan class='text-13 text-white'>
            {dimenName.value}
            {targetListLen.value ? `（${targetListLen.value}）` : '请制定目标'}
          </CnNormalSpan>
        </div>
        {slots.default?.()}

        {dimenId.value !== -1 ? (
          <CnMediumP class='px-16 py-8'>
            {dimenName.value}权重：{targetWeightCount.value}%
          </CnMediumP>
        ) : null}
      </div>
    )
  }
})

export default PhoneDimenBlock
